<template>
  <div class="addr-checking-list">
    <!-- 地址校验左侧列表 -->
    <div class="left">
      <div class="btns">
        <div
          class="ac_btn"
          @click="selectBtnClick(item)"
          v-for="(item,index) in btnTypeOptions"
          :key="index"
          :class="currentBtnType === item.id? 'btn_on' : ''"
        >{{item.name}}</div>
      </div>
      <div class="cl_list">
        <div
          class="cl_item"
          @click="clickclItem(item)"
          :class="item.isChecked ? 'cl_item_selected' : ''"
          v-for="item in leftChecks"
          :key="item.id"
        >
          <div class="cll_left">
            <span class="text_overflow">{{ item.name || '无地址' }}</span>
          </div>
          <div style="display:flex;justify-content: flex-start;align-items:center;">
            <i
              class="el-icon-edit-outline"
              @click.stop="editTargetAddressShowFunc(item)"
              style="margin-left:6px"
            ></i>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="cr-bottom" style="padding: 10px 10px;box-sizing:border-box;">
        <div class="crb-left">
          <span class="clb-choose" style="margin-left: 6px;" v-if="leftChecks.length > 0">
            共
            <span style="color: #108EE9;font-weight:600;font-size: 14px;">{{leftChecks.length}}</span>&nbsp;个
          </span>
        </div>
        <el-pagination
          :pager-count="5"
          small
          layout="prev, pager, next"
          @current-change="pageChange"
          :current-page="currentPage"
          :total="total_num"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改目标地址 dialog editTargetAddressShowDialog -->
    <addrEditWin
      :visible.sync="editTargetAddressShowDialog"
      :onOk="(e) => closeDialog('editTargetAddressShowDialog', e)"
      :confirmSubmit="confirmEditTargetAddressFunc"
      :oldAddr="oldAddr"
    ></addrEditWin>
  </div>
</template>

<script>
import addrEditWin from "../addrCollect/addrEditWin";
import { addOperationLog } from "../../../utils";

export default {
  props: {
    isShowDialogFunc: Function
  },
  components: {
    addrEditWin,
  },
  data() {
    return {
      currentBtnType: "nothing",
      btnTypeOptions: [
        { id: "nothing", name: "无地址" },
        { id: "only", name: "唯一地址" },
        { id: "more", name: "多地址" },
        { id: "sure", name: "已确认" },
      ],
      total_num: 0,
      currentPage: 1,
      leftChecks: [],
      editTargetAddressShowDialog: false,

      oldAddr: "",
    };
  },
  mounted() {
    this.getList();
    this.$parent.$on('addrSureCallback', () => {
      // this.currentBtnType = 'sure'
      console.log('addrSureCallback');
      this.getList()
      this.clickclItem(null, true);
      // this.$store.commit("setMapPoints", []);
      this.$parent.isShowDialog = false
    }) 
  },
  watch: {
    getCurrentFileInfo: function (val, oldval) {
      console.log("currentFileInfo变化了", val, oldval);
      if (JSON.stringify(val) !== JSON.stringify(oldval)) {
        this.getList()
      }
    },
    leftChecks: {
      handler(val) {
        this.$store.state.leftChecksInCollect = val.map((item) => ({
          target_address: item.name,
          id: item.id,
        }));
      },
      deep: true,
    },
  },

  computed: {
    getCurrentFileInfo() {
      return this.$store.state.currentFileInfo;
    },
  },
  methods: {
    async clickclItem(item, parentNodeNoticeClick) {
      if (parentNodeNoticeClick && this.leftChecks.length > 0) {
        item = this.leftChecks[0]
      }
      console.log(item, "item");
      this.$store.state.currentTargetAddrInfo = item;
      this.leftChecks.forEach((it) => {
        if (item.id === it.id) {
          it.isChecked = true;
        } else {
          it.isChecked = false;
        }
      });

      this.isShowDialogFunc()

      // const res = await this.axios.post(this.apis.addressDataQuery, {
      //   import_file_record_id: this.$store.state.currentFileInfo.id,
      //   target_address: item.target_address,
      //   page: this.currentPage,
      //   limit: 10
      // });
      // console.log(res, "ressss");
      // if (res.retCode === 2000) {
      //   this.$store.state.mapPoints = res.rows.items.map((item) => ({
      //     id: item.obj_number,
      //     addr: item.obj_name,
      //     detailaddr: item.details,
      //     point: [item.lng, item.lat],
      //     isCheck: false,
      //   }));
        
      // }
    },
    pageChange(e) {
      this.currentPage = e;
      this.getList();
    },
    editTargetAddressShowFunc(item) {
      this.oldAddr = item.name;
      console.log("editTargetAddressShowFunc");
      this.editTargetAddressShowDialog = true;
    },
    closeDialog(dialogStr) {
      this[dialogStr] = false;
    },
    async confirmEditTargetAddressFunc(newAddr, oldAddr) {
      console.log(newAddr, oldAddr);
      const res = await this.axios.post(
        this.apis.addressDataUpdateTargetAddress,
        {
          import_file_record_id: Number(this.$store.state.currentFileInfo.id),
          old_target_address: [oldAddr],
          new_target_address: newAddr,
        }
      );
      console.log(res, "res");
      if (res.retCode === 2000) {
        this.$message.success("修改成功!");
        await addOperationLog({
          title: "修改目标地址",
          content: {
            old_target_address: [oldAddr],
            new_target_address: newAddr,
          },
        });
        this.getList();
        this.editTargetAddressShowDialog = false;
      }
    },
    async selectBtnClick(item) {
      this.currentPage = 1
      this.currentBtnType = item.id;
      // 清空当前选中的目标地址
      this.$store.state.currentTargetAddrInfo = null;
      this.isShowDialogFunc()
      this.$store.state.mapPoints = []
      // 给当前选中的按钮赋值
      this.$store.state.currentBtnType = item.id;
      await this.getList();
      // this.$forceUpdate()

    },
    async getList() {
      const res = await this.axios.post(this.apis.addressDataGetConditionTargetAddressList, {
        import_file_record_id: this.$store.state.currentFileInfo.id,
        address_type: this.currentBtnType,
        page: this.currentPage,
        limit: 10,
      });
      console.log("发请求结果", res);
      
      console.log(res, "res");
      if (res.retCode === 2000) {
        this.total_num = res.rows.total_num;
        console.log(res.rows.items, 'res.rows.items');
        this.leftChecks = res.rows.items.map((item, i) => ({
          ...item,
          id: new Date().getTime() + i,
          name: item.target_address,
          isChecked: false,
        }));
        console.log(this.leftChecks, 'leftchefck');
      }

      return res.rows.total_num
    },
  },
};
</script>

<style lang="less">
.addr-checking-list {
  .left {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 320px;
    width: 300px;
    height: 100%;
    border: 1px solid #ececec;
    background-color: #f4f4f4;
    z-index: 1000;
    .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      .ac_btn {
        background-color: #fff;
        border: 1px solid #ececec;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
      }
      .btn_on {
        background-color: #108ee9;
        color: #ffffff;
      }
    }
  }
}
</style>
